<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
		<style type="text/css">
			.box {
				padding: 10px;
			}

			.line-form .layui-input {
				width: 300px;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="line-form">
				<input type="text" placeholder="请输入标题" class="userAccount layui-input">
				<button class="search layui-btn layui-btn-normal">搜索</button>
				<button class="add layui-btn layui-btn-normal">新增</button>
			</div>
			<table class="layui-table">
				<thead>
					<tr>
						<th>账户</th>
						<th>用户姓名</th>
						
						<th>头像</th>
						<th>修改人姓名</th>
						<th>乐观锁</th>
						<th>创建时间</th>
						<th>备注</th>
						<th>激活状态</th>
						<th>用户类型</th>	
						<th>操作</th>
						
					</tr>
				</thead>
				<tbody class="tbody">
				</tbody>
			</table>
			<div id="page">
			</div>
			<img class="reviewImg" style="width: 400px;height: 400px; position: absolute; display: none;" />
		</div>
		<script src="https://lib.baomitu.com/jquery/3.0.0/jquery.js"></script>
		<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
		<script type="text/javascript">
			//页面载入事件
			layui.use(['laypage'], () => {
				const laypage = layui.laypage
				//发送查询的Ajax请求
				let getData = (pageNum = 1, pageSize = 10, userAccount = '') => {
					$.ajax({
						type: 'POST',
						url: 'http://122.225.55.70:2666//accountUsers/page',
						headers: {
							'Content-Type': 'application/json',
							'authToken': '9791b599a1364fe98ecb8a13a2628195'
						},
						data: JSON.stringify({
							"pageNum": pageNum,
							"pageSize": pageSize,
							"userAccount": userAccount,
							
						}),
						dataJson: 'json',
						success(res) {
							if (res.code === '0') {
								
								const data = res.data.list
								
								console.log(res)
								//清空元素内的所有子元素
								$(".tbody").empty()
								
								data.forEach((item, index) => {
									let div = $("<div></div>")
									if (item.headPath !== undefined && item.headPath !== '' && item.headPath !== null) {
										const urlStr = item.headPath.substring(0, item.headPath.length - 1)
										const urls = urlStr.split(',')
										urls.forEach((childItem) => {
											let img = $(`<img src=http://122.225.55.70:2666/upload/${childItem}/>`)
											div.append(img)
										})
									}
									const tr = $(
										`<tr>	
								<td>${item.userAccount}</td>
								<td>${item.userName}</td>
								
								<td class=img-list></td>
								<td>${item.updateUserName}</td>
								<td>${item.version}</td>
								<td>${item.gmtCreate}</td>
								<td>${item.memo}</td>
								<td>${item.activeStatus}</td>
								<td>${item.userType}</td>
								
								<td>
									<button class="layui-btn layui-btn-normal">修改</button>
									<button data-id=${item.id} class="del layui-btn layui-btn-warning">删除</button>
								</td>
							</tr>`
									)
									tr.find('td').eq(2).append(div)
									$(".tbody").append(tr)
								})
								//渲染分页组件
								laypage.render({
									elem: 'page',
									count: res.data.total,
									curr: res.data.pageNum,
									jump(obj, first) {
										if (!first) {
											getData(obj.curr, obj.limit)
										} 
									}
								})

							} else {
								alert('数据异常，请联系管理员')
							}
						}
					})
				}
				$(".add").click(() => {
					location.href = 'add02.html'
				})
				$(".search").click(() => {
									//获取输入框的值
									const userAccount = $(".userAccount").val()
								
									getData(1, 10, userAccount)
								})
				$(document).on('mouseover', 'img', function(event) {
					console.log('我移入了img')
					const url = $(this).attr('src')
				
					$('.reviewImg').attr('src', url)
					$('.reviewImg').css({
						display: 'block',
						left: (event.clientX + 10) + 'px',
						top: (event.clientY - 10) + 'px'
					})
				})
				$(document).on('mouseout', 'img', function(event) {
					console.log('我移出了img')
					const url = $(this).attr('src')
				
					$('.reviewImg').attr('src', url)
					$('.reviewImg').css({
						display: 'none',
						left: (event.clientX + 10) + 'px',
						top: (event.clientY - 10) + 'px'
					})
				})
				$(document).on('click','.del',function(){
									const id = $(this).data('id')
									const flag =  confirm('是否确定删除')
									if(flag){
										$.ajax({
											type:'DELETE',
											url:`http://122.225.55.70:2666/accountUsers/${id}`,
											headers: {
												'Content-Type': 'application/json;charset=utf8',
												'authToken': '9791b599a1364fe98ecb8a13a2628195'
											},
											success(res){
												if(res.code==='0'){
													alert('!删除成功')
													getData()
												}else{
													alert('删除失败!')
												}
											}
										})
									}
								})

				getData()
			})
		</script>
	</body>

</html>
